import { FC, useEffect, useState } from 'react'
import PageContainer from '@/components/PageContainer'
import CustomTable from '@/components/CustomTable'
import { userColumns } from './columns'
import { useNavigate } from 'react-router-dom'
import useGetTableData from '@/hooks/useGetTableData'
import { getList } from '@/api/devicelist'
import type { TableData } from './types'
import { Form, Space, Button, Modal, Table } from 'antd'
import { IndexSearchForm } from './SearchForm'
import EditForm from '@/components/EditForm'
import { useFormEdit } from './useFormEdit'
import { changeRefreshToken, changeTokenAction } from '@/store/reducers/login'
import { useAppDispatch } from '@/store/hooks'
import { useAntdTable } from 'ahooks'
import { useActivate } from 'react-activation'
const Index: FC = () => {
  const dispatch = useAppDispatch()
  const [isEditModal, setEditModal] = useState<boolean>(false)
  const navigate = useNavigate()
  const [FormEdit] = Form.useForm()
  const [form] = Form.useForm()
  const { tableProps, params, search, reset } = useGetTableData<TableData>(getList, {
    form: form,
    // pageSize: 20,
    defaultFieldsParams: {
      name: '张',
    },
    defaultParams: {
      type: 1,
    },
  })
  const selectRows = (vals: number[]) => {
    console.log(vals, 'vals')
  }
  const cancel = () => {
    setEditModal(false)
    FormEdit.resetFields()
  }
  const onConfirm = (values: any) => {
    console.log(values, 'editForm.getFieldsValue()')
  }
  return (
    <PageContainer>
      <IndexSearchForm
        form={form}
        onFinish={(vals: any) => {
          search({ name: vals.name })
        }}
        onReset={() => {
          console.log('reset')
          reset()
        }}
      />
      <CustomTable
        extra={
          <Space>
            <Button
              type="primary"
              onClick={() => {
                search({ ...params })
              }}
            >
              设备注册
            </Button>
            <Button
              type="primary"
              onClick={() => {
                console.log(1)
              }}
            >
              批量注册
            </Button>
            <Button
              type="primary"
              onClick={() => {
                console.log(1)
              }}
            >
              设备发放
            </Button>
          </Space>
        }
        scroll={{
          x: 1300,
        }}
        isSelection={true}
        selectRows={selectRows}
        columns={userColumns({
          onView: () => {
            navigate('/devicecenter/detail')
          },
          onEdit: () => {
            setEditModal(true)
          },
          onOpen: () => {
            console.log(1)
          },
          onRecovery: () => {
            console.log(1)
          },
          onDel: () => {
            console.log(2)
          },
        })}
        {...tableProps}
      />
      <Modal
        title="编辑"
        open={isEditModal}
        getContainer={false}
        onOk={() => {
          FormEdit.validateFields()
            .then((values: any) => onConfirm(values))
            .catch((err: any) => {
              console.log(err)
            })
        }}
        onCancel={cancel}
      >
        <EditForm editConfig={useFormEdit()} form={FormEdit} />
      </Modal>
    </PageContainer>
  )
}

export default Index
